import { Tabs, useSegments } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { StatusBar } from "react-native";
import Header from '../components/layout/Header';
import { useEffect, useState } from 'react';

export default function TabLayout() {
  const segments = useSegments();
  const [activeColor, setActiveColor] = useState('#FF4785');  // 主题色

  useEffect(() => {
    // 只有在 tabs 路由下才改变颜色
    if (segments[0] === '(tabs)') {
      const activeTab:any = segments[segments.length - 1];
      
      switch (activeTab) {
        case 'category':
          setActiveColor('#10B981');  // 绿色
          break;
        case 'cart':
          setActiveColor('#F59E0B');  // 黄色
          break;
        case 'profile':
          setActiveColor('#FF4785');  // 紫色
          break;
        case 'index':
        default:
          setActiveColor('#FF4785');  // 粉色
          break;
      }
    }
  }, [segments]);

  return (
    <>
      <StatusBar 
        backgroundColor={segments[0] === '(tabs)' ? activeColor : 'transparent'}
        barStyle={segments[0] === '(tabs)' ? "light-content" : "dark-content"}
        translucent
      />
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: activeColor,
          tabBarInactiveTintColor: '#94A3B8',
          tabBarStyle: {
            backgroundColor: 'white',
          },
          headerShown: true,
          header: ({ route }) => {
            // 根据路由返回不同的 header
            const headerConfig = {
              index: {
                title: "精选商城",
                subtitle: "发现好物好生活",
                variant: "primary"
              },
              category: {
                title: "商品分类",
                subtitle: "为你分类好物",
                variant: "success"
              },
              cart: {
                title: "购物车",
                subtitle: "已选好物",
                variant: "warning"
              },
              profile: {
                title: "个人中心",
                subtitle: "欢迎回来",
                variant: "purple"
              }
            };

            const config = headerConfig[route.name as keyof typeof headerConfig];
            return config ? (
              <Header 
                title={config.title}
                subtitle={config.subtitle}
                variant={config.variant as 'primary' | 'success' | 'warning' | 'purple' | 'default'}
              />
            ) : null;
          },
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: '首页',
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" size={size} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="category"
          options={{
            title: '分类',
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="grid" size={size} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="cart"
          options={{
            title: '购物车',
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="cart" size={size} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: '我的',
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="person" size={size} color={color} />
            ),
          }}
        />
      </Tabs>
    </>
  );
} 